<div id="index" class="displaynone">
<div>
    <div class="row" style="margin-top:20px;margin-bottom:20px;" v-show="loading">
        <div class="loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>

	<div class="container-fluid" style="padding:20px 30px;" v-show="!loading">
        <!-- 数据展示 -->
        <div class="row">
            <div class="col-md-4">
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr>
                            <th width="20%">奖项</th>
                            <th width="60%">概率</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in chanceInfo" :key="item.id">
                            <td>{{item.jx}}</td>
                            <td>{{item.chance}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">修改概率</h4>
                        </div>
                        <div class="modal-body">
                            <div class="row" style="margin-bottom: 15px;">
                                <div class="col-md-2 form-group">一等奖</div>
                                <div class="col-md-10 form-group">
                                    <input type="text" class="form-control" id="chance1" placeholder="请输入1~1000的整数">
                                </div>
                            </div>
                            <div class="row" style="margin-bottom: 15px;">
                                <div class="col-md-2 form-group">二等奖</div>
                                <div class="col-md-10 form-group">
                                    <input type="text" class="form-control" id="chance2" placeholder="请输入1~1000的整数">
                                </div>
                            </div>
                            <div class="row" style="margin-bottom: 15px;">
                                <div class="col-md-2 form-group">三等奖</div>
                                <div class="col-md-10 form-group">
                                    <input type="text" class="form-control" id="chance3" placeholder="请输入1~1000的整数">
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" v-on:click="deletereal()" data-dismiss="modal">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-1"><button type="button" class="btn btn-primary" v-on:click="deleted()" data-toggle="modal" data-target="#myModal">修改</button></div>
        </div>
        <div class="row" style="margin-top: 30px">
            <div class="col-md-4" style="color: red">*本概率已千分号‰为单位*</div>
        </div>
        <div class="row">
            <div class="col-md-8" style="color: red">*在概率及小的情况下，不能保证其发生的可能性*</div>
        </div>
        <div class="modal fade" id="ModalOK" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel1">提示</h4>
                    </div>
                    <div class="modal-body">
                        保存成功
                    </div>
                    <div class="modal-footer">
                        <router-link to="/"><button type="button" class="btn btn-primary" data-dismiss="modal">确定</button></router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    var indexdata={
        loading:true,
        chanceInfo:[],
        delitem:{},
        success:false
    };

    const Index = {
        template: $('#index').html(),
        created () {
            // 组件创建完后获取数据，
            this.loading=true;
            this.fetchData();
        },

        data:function () {
            return indexdata;
        },

        methods:{
            //加载数据
            fetchData:function () {
                var _self=this;
                _self.loading=true;
                _self.chanceInfo = [];

                $.ajax({
                    url: "/chance/Chance/search",
                    type: "post",
                    dataType:'json',
                    success:function(data){
                        //console.log(data);
                        if(data.status==1){
                            _self.chanceInfo = data.data;
                            setTimeout(function(){_self.loading=false;},1000);
                        }else{
                            if(data.message=='未找到信息'){
                                setTimeout(function(){_self.loading=false;},1000);
                            }else{
                                alert('获取数据失败，请重试！');
                                _self.loading=false;
                            }
                        }
                    },
                    error:function(){alert('获取数据失败，请重试！');_self.loading=false;}
                })
            },

            //修改概率
            deleted:function(){
                var data = indexdata.chanceInfo;
                $("#chance1").val(data[0].probability);
                $("#chance2").val(data[1].probability);
                $("#chance3").val(data[2].probability);
            },

            //点击“是”确认删除
            deletereal:function () {
                var reg = /^[1-9][0-9]{0,2}$|1000|0/;
                if(reg.test($("#chance1").val())!=true||reg.test($("#chance2").val())!=true||reg.test($("#chance3").val())!=true){
                    alert('请填写0到1000的整数！');
                    return false;
                }
                var achange = parseFloat($("#chance1").val())+parseFloat($("#chance2").val())+parseFloat($("#chance3").val());
                if($("#chance1").val()==''||$("#chance2").val()==''||$("#chance3").val()==''||achange>1000){
                    alert('概率总和不能大于1000！');
                    return false;
                }
                var _self = this;
                $.ajax({
                    url: "/chance/Chance/updateChance",
                    type: "post",
                    dataType:'json',
                    data:{
                        chance1:$("#chance1").val(),
                        chance2:$("#chance2").val(),
                        chance3:$("#chance3").val()
                    },
                    success:function(data){
                        if(data.status==1){
                            $('#ModalOK').modal('show');
                            setTimeout(function() {
                                $('#ModalOK').modal('hide');
                                location.reload();
                            }, 1000);
                        }
                    },
                    error:function(){alert('获取数据失败，请重试！');_self.loading=false;},
                })
            }
        }
    }
</script>
